import React, { PureComponent } from "react";
import { connect } from "dva";
import Link from 'umi/link';
import { Card } from "antd";
import DataSet from "@antv/data-set";
// import DataSet from  "../../assets/lib/data-set.min";
import Bar from "../../components/Charts/Bar"


@connect(({ dashboard, loading }) => ({
  chartsData:dashboard.chartsData.devChart,
  loading: loading.models.dashboard,
}))
export default class Dashboard extends PureComponent {
  constructor(props) {
    super(props);

  }

  componentDidMount() {


  }


  render() {
    const { chartsData, loading } = this.props;


    const fields = chartsData.map(e=>e.districtName);
    const devNormalNum = {}, devFaultNum={};
    fields.map((item,index)=>{
      devNormalNum[item]=chartsData[index].devNormalNum
    });
    fields.map((item,index)=>{
      devFaultNum[item]=chartsData[index].devFaultNum
    });

    // console.log('chartsData',chartsData)

    const data = [
      {
        name: "正常",
        ...devNormalNum,
      },
      {
        name: "故障",
        ...devFaultNum,
      }
    ];

    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
      type: "fold",
      fields: fields,
      // 展开字段集
      key: "x",
      // key字段
      value: "y" // value字段
    });


    // console.log('loading',loading);

    return (
      <Card
        bordered={false}
        bodyStyle={{padding:10}}
        hoverable={true}
        style={{marginTop:15}}
        loading={loading}
      >
        {
          chartsData && chartsData.length>0 ?
          <Bar
            data={dv}
            height={200}

          /> :
          <div style={{height:200,textAlign:'center',color:'#ccc',paddingTop:90}}>暂无数据</div>
        }

      </Card>
    );
  }
}
